<!--
  手机端的进件列表（其他操作项的 (费率配置 or 签约开通 )）访问页面

  使用端： APP、小程序

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/10/25 16:36
-->

<template>
  <div>
    <div v-if="vdata.divMode == 'loading'">请稍后。。。</div>

    <div v-if="vdata.divMode == 'applySuccess'"> 中间页 </div>

    <div v-if="vdata.divMode == 'applyInfo'" class="jeepay-m-box">
      <!-- 引入具体的接口组件  -->
      <component :is="vdata.currentComponent" ref="showPageComponentRef" />
    </div>
  </div>
</template>


<script setup lang="ts">

import {ref, reactive, computed, provide, onMounted, nextTick, getCurrentInstance} from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import JeepayApplymentAppConfig from './JeepayApplymentAppConfig.vue'
import JeepayApplymentNextBizs from './JeepayApplymentNextBizs.vue'

// 获取全局函数
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
const userStore = useUserStore()

const showPageComponentRef = ref()


// 当前页面的对象信息
const vdata : any = reactive({

  divMode: 'loading', // loading: 等待页  applySuccess：发起成功中间页   applyInfo：进件详情填写
  currentComponent : null,
  isMobile: true // 是否手机端
})

// 向子组件注入：是否手机端
provide('isMobile', computed( ()=> vdata.isMobile) )

onMounted(() => {

  // 加载js 
  loadOnMessageJS()

  // URL 参数获取
  let queryObject : any = useRoute().query

  // 参数验证 jeepayToken
  if(!queryObject.jeepayToken || !queryObject.applyId || !queryObject.configPage){
    return $infoBox.message.error('参数有误')
  }

  userStore.putToken(queryObject.jeepayToken) // 放置token

  vdata.configPage = queryObject.configPage


  // configPage: // APP_CONFIG or NEXT_BIZS
  if(vdata.configPage == 'APP_CONFIG'){

    vdata.currentComponent = JeepayApplymentAppConfig

  }else if(vdata.configPage == 'NEXT_BIZS'){

    vdata.currentComponent = JeepayApplymentNextBizs
  }

  vdata.divMode = 'applyInfo'

  // 渲染页面 
  nextTick(() => showPageComponentRef.value.pageRender(queryObject.applyId))

})

// 引入三方厂商的 js文件
async function loadOnMessageJS(){
  document.addEventListener('UniAppJSBridgeReady', () => {})
}

</script>

<style  lang="less" scoped>
  // 引入进件页面相关样式
  @import './less/applyment.less';
  .jeepay-m-box {
    margin: 20px;
  }

</style>